<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; UTF-8">
<title>Magic Compass Alipay Barcode Admin Site</title>
<link href="<%=request.getContextPath()%>/resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="<%=request.getContextPath()%>/resources/css/style.css" rel="stylesheet">
<script src="<%=request.getContextPath()%>/resources/jquery/jquery-2.2.1.min.js"></script>
<script src="<%=request.getContextPath()%>/resources/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#queryButton').click(function (e) {
		$("#waitingModal").modal({
		  backdrop: 'static',
		  keyboard: false
		});	
	});
	$('#addButton').click(function (e) {
		e.preventDefault();
		$("#waitingModal").modal({
		  backdrop: 'static',
		  keyboard: false
		});
		window.location = "<%=request.getContextPath()%>/admin/addMerchantInit";
	});
	$('#prevPageLink').click(function (e) {
		$("#waitingModal").modal({
		  backdrop: 'static',
		  keyboard: false
		});
	});
	$('#nextPageLink').click(function (e) {
		$("#waitingModal").modal({
		  backdrop: 'static',
		  keyboard: false
		});
	});
});
function doEnable(mid){
	var finalHref = "<%=request.getContextPath()%>/admin/merchantEnableDisable?merchantId="+mid;
	$("#confirm-en-dis-able").modal();
	$("#confirm_modal_yes_link").attr('href', finalHref);
}
function doUpdate(mid){
	var finalHref = "<%=request.getContextPath()%>/admin/updateMerchantInit?merchantId="+mid;
	$("#confirm-update").modal();
	$("#confirm_update_modal_yes_link").attr('href', finalHref);
}
function doQRCode(mid){
	var finalHref = "<%=request.getContextPath()%>/admin/createQRCode?merchantId="+mid;
	$("#confirm-qrcode").modal();
	$("#confirm-qrcode_modal_yes_link").attr('href', finalHref);
}
</script>
</head>
<body>
<div id="wrap">
<%@ include file="../header.jsp" %>
	<div class="container">
		<div class="page-header">
			<h1 class="text-center">Merchant Management</h1>
		</div>
		<br>
		<form:form method="POST" modelAttribute="queryPageForm" action="merchantList" id="barcodePayForm">
			<div class="row">
				<div class="col-xs-2">&nbsp;</div>
				<div class="col-xs-1">Merchant Name:</div>
				<div class="col-xs-2"><form:input type="text" path="merchantName" /></div>
				<div class="col-xs-1">Active Flag:</div>
				<div class="col-xs-1">
					<form:select path="activeFlag">
				      <form:option value="All" label="All" />
				      <form:options items="${activeFlagList}" />
				 	</form:select>
				</div>
				<div class="col-xs-1">&nbsp;</div>
				<div class="col-xs-1">
					<button type="submit" class="btn btn-primary btn-sm btn-block" name="queryButton" id="queryButton">Query</button>
					<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
					<input type="hidden" name="submitType" id="submitType" value="q"/>					
				</div>
				<div class="col-xs-1">
					<button type="submit" class="btn btn-primary btn-sm btn-block" name="addButton" id="addButton">Add Merchant</button>
				</div>
				<div class="col-xs-2">&nbsp;</div>
			</div>
			<br>
			<table class="table table-bordered table-condensed table-striped">
				<thead>
					<tr>
				        <th class="lead text-center">Id</th>
				        <th class="lead text-center">Merchant Name</th>
				        <th class="lead text-center">Display Name</th>
				        <th class="lead text-center">Active</th>
				        <th class="lead text-center">Create On</th>
				        <th class="lead text-center">Update</th>
				        <th class="lead text-center">En(Dis)able</th>
				        <th class="lead text-center">QRCode</th>
			        </tr>
			    </thead>
			    <tbody>
			    	<c:forEach var="mi" items="${pagedList}" varStatus="status">
			    	<tr>
			    		<td>${mi.id}</td>
			    		<td>${mi.merchantName}</td>
			    		<td>${mi.displayName}</td>
	                    <td class="text-center">${mi.activeFlag}</td>
	                    <td class="text-center">${mi.createTimeStr}</td>
	                    <td class="text-center"><a href="#" id="updateLink" onclick="doUpdate(${mi.id})">Update</a></td>
	                    <td class="text-center"><a href="#" id="enableLink" onclick="doEnable(${mi.id})">${mi.enableFlag}</a></td>
	                    <td class="text-center"><a href="#" id="qrCodeLink" onclick="doQRCode(${mi.id})">QRCode</a></td>
			    	</tr>
			    	</c:forEach>
			    </tbody>
		    </table>
		    
		    <div class="row">
				<div class="col-md-5">&nbsp;</div>
				<div class="col-md-1">
					<a href="<%=request.getContextPath()%>/admin/merchantList?paging=t&page=previous&merchantName=${queryPageForm.merchantName}&activeFlag=${queryPageForm.activeFlag}" id="prevPageLink">Previous</a>
				</div>
				<div class="col-md-1">
					<a href="<%=request.getContextPath()%>/admin/merchantList?paging=t&page=next&merchantName=${queryPageForm.merchantName}&activeFlag=${queryPageForm.activeFlag}" id="nextPageLink">Next</a>
				</div>
				<div class="col-md-5">&nbsp;</div>
			</div>
		</form:form>		
	<br><br><br>

<%@ include file="../warningModalDIV.jsp" %>
<%@ include file="../waitingModalDIV.jsp" %>

<div class="modal fade" id="confirm-en-dis-able" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            	Confirm enable/disable merchant.
            </div>
            <div class="modal-body">
               	Do you really want to enable/disable this merchant?
            </div>
            <div class="modal-footer">
                <a class="btn btn-info btn-ok" id="confirm_modal_yes_link">Yes</a>
                <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="confirm-update" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            	Confirm update merchant.
            </div>
            <div class="modal-body">
               	Do you really want to update this merchant?
            </div>
            <div class="modal-footer">
                <a class="btn btn-info btn-ok" id="confirm_update_modal_yes_link">Yes</a>
                <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="confirm-qrcode" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            	Confirm make QRCode.
            </div>
            <div class="modal-body">
               	Do you really want to make QRCode for this merchant?
            </div>
            <div class="modal-footer">
                <a class="btn btn-info btn-ok" id="confirm-qrcode_modal_yes_link">Yes</a>
                <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
            </div>
        </div>
    </div>
</div>

	</div><!-- container end -->
</div><!-- wrap end -->
<%@ include file="../footer.jsp" %>
</body>
</html>